<template>
  <div class="article-create">
    <el-card>
      <el-input
        class="title-input"
        :placeholder="$t('msg.article.titlePlaceholder')"
        v-model="title"
        maxlength="20"
        clearable
      >
      </el-input>
      <el-tabs v-model="activeName">
        <el-tab-pane :label="$t('msg.article.markdown')" name="markdown">
          <Markdown :title="title" :detail="detail" @onSuccess="onSuccess" />
        </el-tab-pane>
        <el-tab-pane :label="$t('msg.article.richText')" name="editor">
          <Editor :title="title" :detail="detail" @onSuccess="onSuccess" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import Editor from './components/Editor.vue';
import Markdown from './components/Markdown.vue';
import { ref, onActivated } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { articleDetail } from '@/api/article';

const route = useRoute();
const router = useRouter();
const activeName = ref('markdown');
const title = ref('');

const onSuccess = () => {
  title.value = '';
  router.push('/article/ranking');
};

const articleId = route.params.id;
const detail = ref({});
const getArticleDetail = async () => {
  detail.value = await articleDetail(articleId);
  // 标题赋值
  title.value = detail.value.title;
};
if (articleId) {
  getArticleDetail();
}

onActivated(getArticleDetail);
</script>

<style lang="scss" scoped>
.title-input {
  margin-bottom: 20px;
}
</style>
